<!-- 合同阶段 -->
<template>
	<div>
		<div flex>
		<!-- <i class="el-icon-plus iconButton add" @click="add"></i>
										<i class="el-icon-delete iconButton del" @click="del"></i> -->
		</div>
		<base-table ref="customtable" :border="true" :showIndex="true" :tabLoading.sync="tabLoading" :tableData="tableData"
			:tableColumn="tableColumn" :funData="[]" :indexOperate="true" @onCellClick="getCell" @onSelectionChange="getSelect"
			@radioChange="singleSelection" @newRow="add" :showsummary="true" :SummariesIndex="[5,6]">
			<!--  单选  -->
			<template v-slot:option="{ row }">
				<el-radio v-model="radio" :label="row.$index" @click="radioChange"></el-radio>
			</template>
			<!--  序号  -->
		<!-- <template v-slot:index="{row}">
				<span>{{row.$index + 1}}</span>
										</template> -->

			<!--  阶段名称  -->
			<template v-slot:phaseName="{ row }">
				<div flex @click="elDialogClick(row.index)">
					<p class="single" :style="{ color: row.phaseName ? '#000' : '#c0c4cc' }" style="width: 100%">
						{{ row.phaseName ? row.phaseName : "请点击选择" }}
					</p>
					<i class="el-icon-more" style="margin-top: 6px;color: #c0c4cc"></i>
				</div>
			</template>
			<!--  执行内容  -->
			<template v-slot:phaseContent="{ row }">
				<el-input v-model="row.phaseContent" clearable type="text"></el-input>
			</template>
			<!--  预警天数  -->
			<template v-slot:warininDays="{ row }">
				<el-input v-model="row.warininDays" clearable @input="(v) => (row.warininDays = v.replace(/[^\d]/g, ''))">
				</el-input>
			</template>
			<!--  预计执行日期  -->
			<template v-slot:planDate="{ row }">
				<el-date-picker v-model="row.planDate" align="right" type="date" placeholder="选择日期"
					value-format="yyyy-MM-dd">
				</el-date-picker>
			</template>

			<!--  执行数量  -->
			<!-- <template v-slot:execAmount="{ row }">
				<el-input v-model="row.execAmount" clearable @input="(v) => (row.execAmount = v.replace(/[^\d]/g, ''))">
				</el-input>
			</template> -->
			<!--  执行金额 -->
			<template v-slot:execMoney="{ row }">
				<el-input v-model="row.execMoney" clearable @input="
					(v) =>
					(row.execMoney = v
						.replace(/[^\d.]/g, '')
						.replace(/\.{2,}/g, '.')
						.replace('.', '$#$')
						.replace(/\./g, '')
						.replace('$#$', '.')
						.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
						.replace(/^\./g, ''))
				">
				</el-input>
			</template>
			<template v-slot:operate="{ row }">
        		<el-tooltip class="item" effect="dark" content="删除当前行" placement="top">
        		  <i class="el-icon-delete" style="color: red; font-size: 16px; margin-right: 10px" @click="del(row)"></i>  
        		</el-tooltip>
        		<el-tooltip class="item" effect="dark" content="复制当前行" placement="top">
        		  <i class="el-icon-document-copy" style="color: #1f63ff; font-size: 16px" @click="duplicate(row)"></i>
        		</el-tooltip>
			</template>
		</base-table>
		<!-- 弹窗 -->
		<base-dialog :closeEscape="true" :showClose="true" :closeModal="false"
			@handleConfirmClick="equipmenthandleConfirmClick" :dialogVisible.sync="equipmentdialog" class="userDialog"
			title="选择设备编码档案" width="50%" top="10vh" :footerShow="true">
			<base-choice :tableColumn="equipmentDatatableColumn" :tableData="equipmentData" @getTableList="getTableList"
				ref="choice" :choiceDialog="equipmentdialog" @onQuery="onQuery" v-loading="loading"></base-choice>
		</base-dialog>
	</div>
</template>

<script>
import baseTable from "@/components/base/baseTable";
import basePage from '@/components/base/basePage'
import baseChoice from "@/components/base/baseChoice/index.vue";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import configData from "./configData";
import { OrganGetContract, OrganDelContractDetail } from "@/api/apis/organization";
export default {
	name: "equipmentDetails",
	components: {
		baseTable,
		basePage,
		baseDialog,
		baseChoice
	},
	data() {
		return {
			loading: false,
			tableHeight: '65vh',
			pickerOptions: {
				shortcuts: [{
					text: '今天',
					onClick(picker) {
						picker.$emit('pick', new Date());
					}
				}, {
					text: '昨天',
					onClick(picker) {
						const date = new Date();
						date.setTime(date.getTime() - 3600 * 1000 * 24);
						picker.$emit('pick', date);
					}
				}]
			},
			optionIndex: '',
			equipmentData: [{
				invCode: '阶段编码',
				name: '阶段名称',
				invName: '执行内容'
			}],
			equipmentDatatableColumn: [
				{
					label: '阶段编码',
					prop: 'phaseCode',
					tooltip: true,
					width: '150'
				},
				{
					label: '阶段名称',
					prop: 'phaseName',
					tooltip: true,
				},
				{
					label: '执行内容',
					prop: 'phaseContent',
					tooltip: true,
				}
			],
			treeHight: '350px',
			menuData: [{
				label: '新集智',
				parentOrganName: '新集智',
				o_OrganCode: '002',
				children: [{
					label: '销售部',
					parentOrganName: '销售部',
					o_OrganCode: '03',
					children: []
				}]
			}],
			equipmentdialog: false,
			tabLoading: false,
			optionData: {},
			radio: false,
			tableData: [],
			taxOptions: [{
				value: '9',
				label: '9'
			}, {
				value: '13',
				label: '13'
			}, {
				value: '17',
				label: '17'
			}],
			tableColumn: [
				// {
				// 	label: '序号',
				// 	prop: 'index',
				// 	tooltip: true,
				// 	width: '100'
				// },
				{
					label: '阶段名称',
					prop: 'phaseName',
					tooltip: true,
					width: '120'
				},
				{
					label: '执行内容',
					prop: 'phaseContent',
					tooltip: true,
					// width: '120'
				},
				{
					label: '预警天数',
					prop: 'warininDays',
					tooltip: true,
					width: '100'
				},
				{
					label: '预计执行日期',
					prop: 'planDate',
					tooltip: true,
					width: '160'
				},
				// {
				// 	label: '执行数量',
				// 	prop: 'execAmount',
				// 	tooltip: true,
				// 	width: '120'
				// },
				{
					label: '执行金额',
					prop: 'execMoney',
					tooltip: true,
					width: '120'
				},
				{
					label: "操作",
					prop: "operate",
					width: "100",
				},
			],
			pageModel: {
				page: 1, //当前页码
				limit: 10, //每页显示多少
				cusClassify: "", //树形分类id
				sequence: "", //排列方式
				sequenceName: "", //需要排列的字段名
			},
			choiceIndex: 'false',
			selectRow: {}
		}
	},
	computed: {},
	filters: {

	},
	mounted() {
	},
	methods: {
		// 树状图点击事件
		handleNodeClick(data) {
			// this.organizationForm = {
			// 	o_OrganCode: data.o_OrganCode,
			// 	ParentOrganName: data.label,
			// }
			// this.propvalue = data.label
			// console.log(data)
		},
		//确定按钮
		equipmenthandleConfirmClick() {
			if (!this.$refs.choice.optionData) {
				this.$vmNews('请选择一条')
				return
			}
			// this.tableData[this.optionIndex]['unitName'] = this.$refs.choice.optionData.unitName
			this.$set(this.tableData[this.optionIndex], 'phaseName', this.$refs.choice.optionData.phaseName)
			this.$set(this.tableData[this.optionIndex], 'phaseContent', this.$refs.choice.optionData.phaseContent)
			this.$set(this.tableData[this.optionIndex], 'phaseID', this.$refs.choice.optionData.billid)
			this.$set(this.tableData[this.optionIndex], 'state', this.$refs.choice.optionData.state)
			// this.$refs.customtable.sx()
			this.equipmentdialog = false
		},
		// 设备编码点击事件
		elDialogClick(index) {
			this.equipmentdialog = true
			this.OrganGetContract()
			this.optionIndex = index
		},
		async OrganGetContract() {
			const res = await OrganGetContract({
				...this.pageModel,
			});
			if (res.success == "true") {
				this.$nextTick(() => {
					this.$refs.choice.setPageTotal(res.data[0]);
				});
				this.equipmentData = res.data[1];
			}
		},
		// 分页变化
		onQuery(model) {
			this.pageModel.page = model.page;
			this.pageModel.limit = model.limit;
			this.OrganGetContract()
		},
		// 单元格点击事件
		getCell(row, label) {
			this.selectRow = row;
		},
		// 表格多选
		getSelect(selectTable) {
			this.selectTable = selectTable
		},
		radioChange(val) {
			this.optionData = val
			this.radio = val.index
		},
		singleSelection(val) {
			this.choiceIndex = val.index
		},
		//添加
		add() {
			let arr = {
				name: '',
				content: '',
				days: '',
				date: '',
				number: '',
				price: ''
			}
			this.tableData.push(arr)
		},
		async del(row) {
			this.$confirm('确认删除该明细吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				if (row.mainID && this.$route.query.name == '编辑合同') {
					OrganDelContractDetail({ id: row.detail_ID}).then ( res => {
						if (res.success == "true") {
							this.$emit("renovate");
							this.$message({
								message: "删除成功",
								type: "success",
							});
							this.tableData.splice(row.index, 1);
							this.$emit('renew')
						}
					})
				} else {
					this.tableData.splice(row.index, 1);
				}
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		duplicate(row) {
			let data = {
				...row,
				detail_ID:null
			}
			this.tableData.push(JSON.parse(JSON.stringify(data)));
		},
		// 查询
		getTableList(data) {
			console.log("查询")
			// this.xmTableData[0].P_PersonName='徐明泉'
		}
	}
}
</script>

<style>
.el-table th>.cell {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

}
</style>
<style scoped lang="scss">
>>>.el-radio__label {
	// display: none;
}

.iconButton {
	padding: 10px 12px;
	color: white;
	margin: 5px;
}

.iconButton.add {
	background-color: #409eff !important;
}

.iconButton.del {
	background-color: #f56c6c !important;
}
</style>
